<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script>
			function post() {
				document.getElementById("post").style.display = "block";
			}

			var tou = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

			function postSuccess() {
				var newLi = document.createElement("li"); //创建一个新的li节点元素
				var iNum = Math.floor(Math.random() * 4); //随机获取头像
				var touDiv = document.createElement("div"); //创建头像所在的div节点
				var touImg = document.createElement("img"); //创建头像节点
				touImg.setAttribute("src", "images/" + tou[iNum]); //增加头像路径
				touDiv.appendChild(touImg); //将头像放在div节点中

				var titleH1 = document.createElement("h1"); //创建标题所在的标签h1
				var title = document.getElementById("title").value; //获取标题
				titleH1.innerHTML = title; //将标题内容放在h1标签中

				var newP = document.createElement("p"); //创建一个新的p节点元素
				var secName = document.createElement("span");
				var secSelect = document.getElementById("sec").value; //获取版块
				secName.innerHTML = "版块：" + secSelect; //把版块内容放到span中
				var myDate = new Date();
				var currentDate = myDate.getFullYear() + "-" + parseInt(myDate.getMonth() + 1) + "-" + myDate.getDate() + " " +
					myDate.getHours() + ":" + myDate.getMinutes();
				var timeSpan = document.createElement("span");
				timeSpan.innerHTML = "发表时间：" + currentDate;
				newP.appendChild(secName); //在p节点中插入版块
				newP.appendChild(timeSpan); //在p节点中插入发布时间；

				newLi.appendChild(touDiv); //插入头像
				newLi.appendChild(titleH1); //插入标题
				newLi.appendChild(newP); //插入版块、时间内容
				var postList = document.getElementById("postList");
				postList.insertBefore(newLi, postList.firstChild); //把当前内容插入到列表最前面

				document.getElementById("title").value = ""; //标题设置为空
				document.getElementById("content").value = ""; //内容设置为空

				document.getElementById("post").style.display = "none";
			}
		</script>
	</head>
	<body>
		<div class="bbs">
			<header><span onclick="post()">我要发帖</span></header>
			<section>
				<ul id="postList">
					<li>
						<div><img src="images/tou02.jpg"></div>
						<h1>ggggg</h1>
						<p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p>
					</li>
					<li>
						<div>
							<img src="images/tou01.jpg"></div>
						<h1>ddddd</h1>
						<p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
					</li>
				</ul>
			</section>

			<div class="post" id="post">
				<input class="title" placeholder="请输入标题（1-50个字符）" id="title">
				所属版块：<select id="sec">
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content" id="content"></textarea>
				<input class="btn" value="发布" onclick="postSuccess()">
			</div>
		</div>
	</body>
</html>
